<template>
  <view class="content" style="background-color: aliceblue;">
    <!-- 选择标签 -->
    <view class="uni-padding-wrap">
      <uni-segmented-control :current="current" :values="items" style-type="text" activeColor="#007aff"
        @clickItem="onClickItem" />
    </view>
    <!-- 内容 -->
    <view class="content">
      <view v-if="current === 0">
        <uni-table ref="table" :loading="loading" stripe type="selection" emptyText="暂无更多数据"
          @selection-change="selectionChange">
          <uni-tr>
            <uni-th>
              <view class="top" style="display: flex;justify-content: space-between;color: red;">
                <text class="p-5">{{total}}</text>
                <text class="p-5" @click="del">删除</text>
              </view>
            </uni-th>
          </uni-tr>
          <uni-tr v-if="orderData" v-for="(item,i) in orderData" :key="i">
            <uni-collapse accordion v-model="accordionVal" @change="change">
              <uni-collapse-item title="手风琴效果">
                <view class="content">
                  <text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
                </view>
              </uni-collapse-item>
              <uni-collapse-item title="手风琴效果">
                <view class="content">
                  <text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
                </view>
              </uni-collapse-item>
              <uni-collapse-item title="手风琴效果">
                <view class="content">
                  <text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text>
                </view>
              </uni-collapse-item>
            </uni-collapse>



            <view class="g-card">
              <view class="g-img">
                <text class="mr-10">{{item.name}}</text>
              </view>
              <view class="g-text">
                <view style="display: flex;justify-content: space-between;">
                  <text class="mr-10" style="color: orangered;">￥{{item.sumPrice}}</text>
                  <text class="mr-10" style="font-size: 10px;">{{item.status}}</text>
                </view>
              </view>
            </view>
          </uni-tr>
        </uni-table>
      </view>
      <view v-if="current === 1">





        <text class="content-text">选项卡2的内容</text>



      </view>
      <view v-if="current === 2">



        <text class="content-text">选项卡3的内容</text>


      </view>

      <view v-if="current === 3">



        <text class="content-text">选项卡4的内容</text>


      </view>

      <view v-if="current === 4">



        <text class="content-text">选项卡5的内容</text>


      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: ['全部', '待审核', '已发货', '已完成', '已取消'],
        current: 0,

        accordionVal: '1',
        total: 0,
        orderData: [],
        pageNum: 1,
        pageSize: 5,
        //订单名称
        name: '',
        formData: []
      }
    },
    onShow() {
      this.load()
    },
    onReachBottom() {
      this.pageSize++

    },
    onLoad() {
      this.load()
    },
    onPullDownRefresh() {
      this.load()
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    methods: {
      change(e) {
        console.log(e);
      },
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
        }
        if (this.current === 0) {
          console.log(0);
          return false
        }
        if (this.current === 1) {
          console.log(1);
          return false
        }
        if (this.current === 2) {
          console.log(2);
          return false
        }
        if (this.current === 3) {
          console.log(3);
          return false
        }
        if (this.current === 4) {
          console.log(4);
          return false
        }
      },
      load() {
        this.request({
          url: '/orders/page',
          method: 'GET',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.name
          }
        }).then(res => {
          this.orderData = res.data.records
          this.total = res.data.total
        })
      },
      //选择
      selectionChange(e) {
        this.formData = []
        // 多选
        var selectedIndexs = e.detail.index
        for (var i = 0; i < selectedIndexs.length; i++) {
          console.log(selectedIndexs[i]);
          this.formData.push(this.orderData[selectedIndexs[i]])
        }
      },
      del() {
        let ids = this.formData.map(v => v.id)
        if (ids.length == 0) {
          uni.showToast({
            icon: "error",
            title: "请选择数据"
          })
          return false
        }
        this.request({
          url: '/orders/del/batch/',
          method: 'POST',
          data: ids
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: "none",
              title: "删除成功"
            })
            this.selectionChange()
          } else {
            uni.showToast({
              icon: "error",
              title: res.message
            })
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .p-5 {
    padding: 15rpx;
  }

  .g-card {
    display: flex;
    padding: 50rpx;
    background-color: white;
    border-radius: 15rpx;
  }

  .g-img {
    flex: 1;
    display: flex;
  }

  .g-text {
    justify-content: space-between;
    flex-direction: column;
    display: flex;
    margin: 20rpx;
    flex: 1;
  }
</style>
